<template>
  <div class="wrapper">
    <header>
      <Back></Back>
      <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</p>
      <p>用户钱包充值</p>
      <p>&emsp;&emsp;&emsp;&emsp;</p>
    </header>
    <div class="recharge-box">
      <div class="input-group">
        <label for="add_balance">充值金额(元)</label>
        <input type="number" id="add_balance" v-model.number="add_balance" placeholder="请输入充值金额" />
      </div>
      <button class="recharge-btn" @click="handleRecharge">确认充值</button>
    </div>
  </div>
</template>
<script>
import Back from "@/components/Back.vue";

export default {
  name: 'UserRecharge',
  components: { Back },
  data() {
    return {
      userId: this.$route.query.userId,
      add_balance: null // 充值金额，使用 add_balance 作为变量名
    };
  },
  methods: {
    handleRecharge() {
      if (!this.add_balance || this.add_balance <= 0) {
        alert('请输入有效的充值金额');
        return;
      }

      // 将金额转换为字符串格式，确保后端可以解析为 BigDecimal
      let addBalance = this.add_balance.toString();

      let url = `VirtualWallet/rechargeByUserId/${this.userId}/${addBalance}`;
      this.$axios.post(url)
          .then(response => {
            if (response.data && response.data.result === 1) {
              alert('充值成功');
              this.$router.push({ path: '/myWallet', query: { userId: this.userId } });
            } else if (response.data.result === -2) {
              alert('充值金额不符合范围');
            } else {
              alert('充值失败');
            }
          })
          .catch(error => {
            console.error('Error during recharge:', error);
            alert('充值失败，请稍后重试');
          });
    }
  }
};
</script>
<style scoped>
/* 总容器 */
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

/* 头部 */
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #00abf5;
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper header .left {
  flex: 3;
  margin-left: 8vw;
  font-size: 4.8vw;
}

.wrapper header .right {
  margin-right: 4vw;
  font-size: 2.5vw;
}

/* 充值内容 */
.wrapper .recharge-box {
  width: 90%;
  height: 50vw;
  margin: 12vw 4vw 0 4vw;
  background-color: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 2vw 4vw;
}

.wrapper .recharge-box .input-group {
  margin-bottom: 2vw;
}

.wrapper .recharge-box .input-group label {
  display: block;
  margin-bottom: 1vw;
  font-size: 4.5vw;
  font-weight: 400;
  color: #7f7f7f;
}

.wrapper .recharge-box .input-group input {
  width: 100%;
  height: 10vw;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 4.5vw;
  padding: 0 1vw;
  box-sizing: border-box;
}

.wrapper .recharge-box .recharge-btn {
  width: 100%;
  height: 10vw;
  border: none;
  outline: none;
  border-radius: 6px;
  font-size: 4.5vw;
  font-weight: 500;
  background-color: #00abf5;
  color: #fff;
  margin-top: 2vw;
}

.wrapper .recharge-box .recharge-btn:hover {
  background-color: #007bff;
}
</style>